<template>
  <div>
    <deerDefault>
      <div slot="formHead" class="flexLeft flex1">
        <div class="datum">申报材料</div>
        <div class="datumItem flex1">
          <div>节目标题</div>
          <div style="height: 152px">节目类别</div>
          <div>节目长度</div>
          <div>首播平台</div>
          <div>录音设备</div>
          <div>录制方式</div>
        </div>
      </div>
      <div slot="formMain" class="formMain">
        <!-- 节目标题 -->
        <input
          type="text"
          class="w100 borB borR"
          :value="reportData.title"
        />
        <!-- 节目类别 -->
        <div class="borB w100 flexLeft" style="align-items: flex-start">
          <div class="flexLeft topTitle flex1">
            <div class="flex2 one borL">
              <div class="borB padTB5">音乐</div>
              <div class="flexLeft borB">
                <div class="flex1 borL">
                  <div class="borB padTB5">器乐</div>
                  <div class="flexLeft">
                    <div
                      class="flexLeft borL flexColumn flex1 item"
                      v-for="(i, k) in inst"
                      :key="k"
                    >
                      <div class="datum marB10">{{ i.label }}</div>
                      <input type="radio" v-model="v3" :value="i.value" />
                    </div>
                  </div>
                </div>
                <div class="flex1 borL">
                  <div class="borB padTB5">声乐</div>
                  <div class="flexLeft">
                    <div
                      class="flexLeft borL flexColumn flex1 item"
                      v-for="(i, k) in vocal"
                      :key="k"
                    >
                      <div class="datum marB10">{{ i.label }}</div>
                      <input type="radio" v-model="v3" :value="i.value" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex1 one borL borB">
              <div class="borB padTB5">语言</div>
              <div class="flexLeft">
                <div
                  class="flexLeft borL flexColumn flex1 item item1"
                  v-for="(i, k) in lang"
                  :key="k"
                >
                  <div class="datum marB10">{{ i.label }}</div>
                  <input type="radio" v-model="v3" :value="i.value" />
                </div>
              </div>
            </div>
          </div>
          <div class="flex1 flexLeft">
            <div
              class="flexLeft flex1 flexColumn borL pad5 let"
              v-for="(i, k) in options"
              :key="k"
            >
              <div class="datum marB10">{{ i.label }}</div>
              <input type="radio" v-model="v3" :value="i.value" />
            </div>
          </div>
        </div>
        <!-- 节目长度 -->
        <div class="borB flex1 flexLeft">
          <div class="flexLeft flex1">
            <input type="text" style="width: 60px" :value="reportData.jmcdMin" />
            分
            <input type="text" style="width: 60px" :value="reportData.jmcdSec" />
            秒
          </div>
          <div class="flexLeft flex1">
            <div class="awardName borL borR">首播日期</div>
            <div class="flexLeft flex1">
              <input type="text" style="width: 60px" :value="reportData.sbrqn"/>
              年
              <input type="text" style="width: 60px" :value="reportData.sbrqy"/>
              月
              <input type="text" style="width: 60px" :value="reportData.sbrqr"/>
              日
            </div>
          </div>
        </div>
        <!-- 首播平台 -->
        <div class="borB flex1 flexLeft">
          <input type="text" class="flex1" :value="reportData.sbpt"/>
          <div class="flexLeft flex1">
            <div class="awardName borL borR">首播链接</div>
            <input type="text" class="flex1" :value="reportData.sblj"/>
          </div>
        </div>
        <!-- 录音设备 -->
        <div class="borB flex1 flexLeft">
          <div class="padL10 flex1">
            <a-radio-group
              :options="num"
              v-model="reportData.lysb"
              class="flex1"
              @change="onChange1"
            />
          </div>
          <div class="flexLeft flex1" style="margin-left: -10px">
            <div class="awardName borL borR">同期录音</div>
            <div class="flex1 padL10">
              <a-radio-group name="radioGroup" @change="onChange3" v-model="reportData.tqly">
                <a-radio :value="1"> 是 </a-radio>
                <a-radio :value="2"> 否 </a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
        <!-- 录制方式 -->
        <div class="flex1 flexLeft marL10" style="height: 43px">
          <a-radio-group name="radioGroup" @change="onChange2" v-model="reportData.lzfs">
            <a-radio :value="1"> 单声道 </a-radio>
            <a-radio :value="2"> 立体声 </a-radio>
            <a-radio :value="3"> 多轨 </a-radio>
          </a-radio-group>
        </div>
      </div>
    </deerDefault>
  </div>
</template>

<script>
import deerDefault from "@/components/deerAward/deerDefault.vue";
const options = [
  { label: "戏曲", value: "10" },
  { label: "曲艺", value: "11" },
  { label: "广播剧", value: "12" },
  { label: "片花", value: "13" },
  { label: "广告", value: "14" },
  { label: "环绕声", value: "15" },
  { label: "网络音频", value: "16" },
];
export default {
  components: {
    deerDefault,
  },
  data() {
    return {
      options,
      v3: "aa",
      inst: [
        { label: "民乐", value: "1" },
        { label: "西洋乐", value: "2" },
        { label: "流行乐", value: "3" },
      ],
      vocal: [
        { label: "民族", value: "4" },
        { label: "美声", value: "5" },
        { label: "通俗", value: "6" },
      ],
      lang: [
        { label: "新闻", value: "7" },
        { label: "艺术", value: "8" },
        { label: "专题", value: "9" },
      ],
      num: [
        { label: "数字", value: "1" },
        { label: "模拟", value: "2" },
        { label: "混合", value: "3" },
      ],
      reportData: {
        lysb: "",
        jmcdMin:"",
        jmcdSec:"",
        lzfs:"",
        sblj:"",
        sbpt:"",
        sbrqn:"",
        sbrqy:"",
        sbrqr:"",
        tqly:''
      },
    };
  },
  methods: {
    onChange1(e) {
      console.log(e);
      this.reportData.lysb = e.target.value;
    },
    onChange2(e){
      this.reportData.lzfs = e.target.value;
    },
    onChange3(e){
      console.log(this.reportData,'reportData')
      console.log(e)
      this.reportData.tqly = e.target.value;
    }
  },
};
</script>

<style lang="scss" scoped>
@import url("../../assets/sass/components/form.scss");
.formMain {
  width: 100%;
  .w100 {
    width: 100%;
  }
  .let {
    letter-spacing: 5px;
    height: 151px;
    display: flex;
    justify-content: flex-end;
  }
  .topTitle {
    align-items: flex-start;
  }
  .category {
    left: 0;
    top: 0;
    flex: 5;
  }
  .one {
    text-align: center;
  }
  .item {
    height: 89px;
    justify-content: flex-end;
    padding-bottom: 5px;
    box-sizing: border-box;
  }
  .item1 {
    height: 120px;
  }
}
</style>